<!-- 歌单页面 -->
<template>
	<view>
		<!-- 信号栏变色 -->
		<view class="nav" :style="'background-color: rgba(0, 0, 0,' + op + ')'">
			<view class="status-bar" :style="'height:' + statusBarHeight + 'px'"></view>
		</view>
		<view v-if="!reList.length" class="loading">
			<u-loading-icon color="#1989fa"></u-loading-icon>
		</view>
		<view class="m-vplaylist u-paddlr u-paddbm" v-else>
			<view class="header" :style="'margin-top:' + (titletop + titleheight / 2 - 10) + 'px'">
				<u-icon name="arrow-left" color="#fff" size="20" @click="back"></u-icon>
			</view>
			<section v-if="!playlist.updateFrequency" class="u-plhead pylst_header">
				<view class="plhead_bg" :style="{ backgroundImage: `url(${playlist.coverImgUrl})` }"></view>
				<view class="plhead_wrap">
					<view class="plhead_fl lsthd_fl">
						<image class="u-img" :src="playlist.coverImgUrl" alt="" />
						<span class="lsthd_icon">{{ playlist.highQuality ? '精品' : '' }}歌单</span>
						<i class="u-earp lsthd_num" style="font-style: normal">{{ num(playlist.playCount) }}</i>
					</view>
					<view class="plhead_fr">
						<h2>{{ playlist.name }}</h2>
						<view class="lsthd_auth f-thide">
							<view class="lsthd_link" @click="gotoUserInfo(creator.userId,creator.nickname)">
								<view class="u-avatar lsthd_ava">
									<image class="u-img" :src="creator.avatarUrl" alt="" />
									<image class="ava-icon" v-if="creator.avatarDetail" :src="creator.avatarDetail.identityIconUrl" />
								</view>
								{{ wordLimit(creator.nickname) }}
							</view>
						</view>
					</view>
				</view>
			</section>
			<section v-else class="official_pylst_header">
				<view class="ofplheader_bg" :style="{ backgroundImage: `url(${playlist.backgroundCoverUrl})` }"></view>
				<view class="ofplheader_mask"></view>
				<view class="ofplheader_wrap">
					<view>{{ playlist.name }}</view>
					<view class="ofplheader_tag">{{ playlist.updateFrequency }}</view>
					<view class="ofplheader_content">
						<span v-html="playlist.description" class="u-line-3"></span>
					</view>
					<view class="overflow"></view>
				</view>
			</section>
			<view class="pylst_list">
				<h3 class="u-smtitle">歌曲列表</h3>
				<view class="m-sglst">
					<HitSongList :songlist="reList" :type="false" :routerId="id"></HitSongList>
				</view>
				<view class="m_newcomm">
					<h4 v-if="hotComments.length">精彩评论</h4>
					<CommentView :comment="hotComments"></CommentView>
					<template v-if="hotComments.length < 15">
						<h4 v-if="total">最新评论({{ total }})</h4>
						<CommentView :comment="comments"></CommentView>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { numberFormat } from '@/utils/common';
import HitSongList from '@/components/HitSongList.vue';
import CommentView from '@/components/CommentView.vue';
import { commentsAPI, hitSongAPI } from '@/api';
export default {
	components: {
		HitSongList,
		CommentView
	},
	data() {
		return {
			id: '',
			reList: [], // 热门歌曲
			playlist: {}, // 歌单信息
			hotComments: [], // 精彩评论
			comments: [], // 最新评论
			total: 0,
			creator: {},

			op: 0,
			titletop: 0,
			titleheight: 0,
			statusBarHeight: 0
		};
	},
	computed: {
		//数字格式化
		num() {
			return (val) => {
				return numberFormat(val);
			};
		},
		//字符串格式化
		wordLimit() {
			return (val) => {
				if (val.length <= 7) {
					return val;
				} else {
					return val.slice(0, 7) + '...';
				}
			};
		}
	},

	onLoad(option) {
		this.id = option.id || '';
		//获取热门歌曲列表
		hitSongAPI({
			id: this.id
		}).then((res) => {
			this.reList = res.playlist.tracks.slice(0, 10);
			this.playlist = res.playlist;
			this.creator = res.playlist.creator;
		});
		//获取评论
		commentsAPI({
			id: this.id
		}).then((res) => {
			this.hotComments = res.hotComments;
			if (this.hotComments.length < 15) {
				this.comments = res.comments.slice(0, 15 - this.hotComments.length);
				this.total = res.total;
			}
		});
		// 调用APP中的数据
		getApp().getHeight();
		this.titletop = getApp().titletop;
		this.titleheight = getApp().titleheight;
		this.statusBarHeight = getApp().statusBarHeight;
	},
	onPageScroll(res) {
		let top = res.scrollTop;
		let height = this.statusBarHeight + 44;
		if (top <= height) {
			this.op = Math.round((top / height) * 100) / 100;
		} else {
			this.op = 1;
		}
	},
	methods: {
		gotoUserInfo(id,name) {
			if(name ==='帐号已注销'){
				return
			} else {				
				uni.navigateTo({
					url: '/pages/UserInfo?id=' + id
				});
			}
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
}

.title {
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
}

.loading {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%);
}

.m-vplaylist {
	background-color: #fff;
	min-height: 100%;
}

.header {
	position: absolute;
	left: 10px;
	z-index: 100;
	color: #fff;
}

.u-plhead {
	position: relative;
	padding: 90px 10px 30px 15px;
	overflow: hidden;

	.plhead_bg {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50%;
		filter: blur(20px);
		transform: scale(1.5);
	}

	.plhead_bg:after {
		content: ' ';
		background-color: rgba(0, 0, 0, 0.25);
	}

	.plhead_wrap {
		display: flex;
		position: relative;
		z-index: 2;
	}

	.plhead_fl {
		width: 126px;
		height: 126px;
		position: relative;
		background-color: #e2e2e3;

		.u-img {
			height: 100%;
			vertical-align: middle;
		}

		.lsthd_icon {
			position: absolute;
			z-index: 3;
			top: 10px;
			left: 0;
			padding: 0 8px;
			height: 17px;
			color: #fff;
			font-size: 9px;
			text-align: center;
			line-height: 17px;
			background-color: rgba(217, 48, 48, 0.8);
			border-top-right-radius: 17px;
			border-bottom-right-radius: 17px;
		}

		.u-earp {
			background-image: url('');
		}
	}
}

.plhead_bg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.pylst_header {
	.lsthd_fl:after {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 18px;
		z-index: 2;
		background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
	}

	.lsthd_num {
		position: absolute;
		right: 2px;
		top: 0;
		z-index: 3;
		padding-left: 15px;
		color: #fff;
		font-size: 12px;
		background-position: 0;
		background-repeat: no-repeat;
		background-size: 11px 10px;
		shadow-color: 'rgba(0, 0, 0, 0.15)';
		shadow-offset-x: '1px';
		shadow-offset-y: '0';
		shadow-blur: '0px';
	}

	.plhead_fr {
		padding-top: 3px;
		flex: 1 1 auto;
		width: 1%;
		margin-left: 16px;

		> h2 {
			padding-top: 1px;
			font-size: 17px;
			font-weight: 400;
			line-height: 1.3;
			color: #fefefe;
			height: 44px;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0;
		}
	}

	.lsthd_auth {
		position: relative;
	}

	.lsthd_link {
		display: inline-block;
		color: hsla(0, 0%, 100%, 0.7);
		font-size: 14px;
	}

	.lsthd_ava {
		display: inline-block;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 5px;
	}
}

.f-thide {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: normal;
}

.u-avatar {
	position: relative;

	> .u-img {
		border-radius: 50%;
		height: 100%;
	}

	.ava-icon {
		position: absolute;
		right: -5px;
		bottom: 0;
		width: 12px;
		height: 12px;
	}
}

.official_pylst_header {
	position: relative;
	padding: 90px 20px 20px;
	overflow: hidden;

	.ofplheader_bg {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50%;
	}

	.ofplheader_mask {
		z-index: 10;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		opacity: 0.25;
		background: #000;
	}

	.ofplheader_wrap {
		position: relative;
		z-index: 100;
		color: #fff;

		view:first-child {
			font-size: 18px;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.ofplheader_tag {
			padding-left: 3px;
			padding-right: 3px;
			margin-top: 10px;
			display: inline-block;
			background-color: hsla(0, 0%, 100%, 0.2);
			border-radius: 2px;
			font-size: 10px;
			color: hsla(0, 0%, 100%, 0.6);
		}

		.ofplheader_content {
			margin-top: 20px;
			font-size: 14px;
			color: hsla(0, 0%, 100%, 0.8);
		}

		.overflow {
			float: right;
			margin: -0.7em -0.3em 0 0;
			width: 0.4em;
			height: 0.4em;
			border-top: 1px solid hsla(0, 0%, 100%, 0.8);
			border-right: 1px solid hsla(0, 0%, 100%, 0.8);
			transform: rotate(45deg);
		}
	}
}

.pylst_list {
	.u-smtitle {
		height: 23px;
		line-height: 23px;
		padding: 0 10px;
		font-size: 12px;
		color: #666;
		background-color: #eeeff0;
		font-weight: 400;
		margin: 0;
	}

	.m_newcomm {
		position: relative;
		margin-top: 18px;

		> h4 {
			padding: 0 10px;
			height: 23px;
			line-height: 23px;
			margin: 0;
			color: #666;
			font-size: 12px;
			font-weight: 400;
			background: rgba(0, 0, 0, 0.05);
		}
	}
}
</style>
